<template>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <div class='Hone_nav'>
        <el-link :underline='false'>规则1</el-link>
        <el-link :underline='false'>规则2</el-link>
        <el-link :underline='false'>规则3</el-link>
        <el-link :underline='false'>规则4</el-link>
        <el-link :underline='false'>规则5</el-link>
      </div>
    </el-header>
    <!-- 侧边栏 -->
    <el-aside>
      <div class='user_control'>
        <!-- 用户头像和搜索区域 -->
        <div class='user_one'>
          <el-image
            style='width: 6vh; height: 6vh'
            :src='uesr_url'
            :fit='fit'
          ></el-image>
          <el-button
            type='info'
            round
            size='mini'
          >点击隐藏</el-button>
          <el-input
            placeholder='请输入搜索内容'
            suffix-icon='el-icon-search'
            v-model='input1'
            size='mini'
          >
          </el-input>
        </div>
        <!-- 应用功能区 -->
        <div class='user_message_options'>
          <el-link
            :underline='false'
            icon='el-icon-star-on'
          >逛街</el-link>
          <el-link
            :underline='false'
            icon='el-icon-star-on'
          >分类</el-link>
          <el-link
            :underline='false'
            icon='el-icon-star-on'
          >时尚圈</el-link>
          <el-link
            :underline='false'
            icon='el-icon-star-on'
          >我的</el-link>
        </div>
      </div>
    </el-aside>
    <div class='nav_sort'>
      <el-link :underline='false'>男装 </el-link>
      <el-link :underline='false'>女装</el-link>
      <el-link :underline='false'>童装</el-link>
      <el-link :underline='false'>奥莱</el-link>
      <el-link :underline='false'>珠宝</el-link>
      <el-link :underline='false'>居家</el-link>
      <el-link :underline='false'>。。。</el-link>
    </div>
    <!-- 主体区 -->
    <el-main>
      <!-- 轮播图 -->
      <banner_swiper :list='bannerList'></banner_swiper>
    </el-main>
    <!-- 脚部 -->
    <el-footer></el-footer>
  </el-container>
</template>

<script>
// 导入轮播图组件
import swiper from '@/components/element/swiper.vue';

export default {
  name: 'Index',
  data() {
    return {
      // 用户默认头像
      uesr_url:
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      fit: 'fill',
      // 轮播图数据
      bannerList: [
        { title: '1', path: require('@/assets/img/banner/01.jpg'), url: '#' },
        { title: '2', path: require('@/assets/img/banner/02.jpg'), url: '#' },
        { title: '3', path: require('@/assets/img/banner/03.jpg'), url: '#' },
        { title: '4', path: require('@/assets/img/banner/04.jpg'), url: '#' },
        { title: '5', path: require('@/assets/img/banner/05.jpg'), url: '#' },
      ],
    };
  },
  components: {
    'banner_swiper': swiper,
  },
};
</script>

<style lang='less' scoped>
html {
  font-size: 16px;
}
.el-header {
  width: 100%;
  padding: 0 0;
}
.Hone_nav {
  height: 9vh;
  width: 100%;
  background-color: #2F2E33;
  display: flex;
  flex-direction: row-reverse;
  .el-link {
    font-size: 1rem;
    padding: 0 1.25rem;
  }
}
.el-aside {
  position: absolute;
  width: 20vw;
  height: 100vh;
  background-color: #2F2E33;
  .user_control {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .user_one {
    display: flex;
    flex-direction: column;
    align-items: center;
    .el-image {
      border-radius: 50%;
      margin-top: 0.625rem;
    }
    .el-button {
      margin: 1.5625rem 0;
      width: 6.25rem;
    }
    .el-input {
      width: 150px;
    }
  }
  .user_message_options {
    margin-top: 1.875rem;
    display: flex;
    height: 24vh;
    width: 6.25rem;
    flex-direction: column;
    .el-link {
      margin: 0.9375rem 0;
    }
  }
}
.nav_sort {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  width: 9.375rem;
  position: absolute;
  left: 13.9375rem;
  background-color: #ffffff;
  .el-link {
    margin: 1.25rem 0;
  }
}
.el-main {
  position: absolute;
  width: 900px;
  padding: 0;
  right: 0;
  top: 9vh;
}
</style>
